<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>用户注册</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
<meta name="format-detection" content="telephone=no">
<meta name="renderer" content="webkit">
<meta http-equiv="Cache-Control" content="no-siteapp" />
<link rel="stylesheet" href="__STATIC__amazeui/css/amazeui.min.css"/>
<link rel="stylesheet" href="__STATIC__default/style.css"/>
<script src="__STATIC__amazeui/js/jquery.min.js"></script>
<script src="__STATIC__amazeui/js/amazeui.min.js"></script>
</head>

<body>
<div class="container">
	<header data-am-widget="header" class="am-header am-header-default my-header">
      <div class="am-header-left am-header-nav">
        <a href="#left-link" class="">
          <i class="am-header-icon am-icon-chevron-left"></i>
        </a>
      </div>
      <h1 class="am-header-title">
        <a href="#title-link" class="">用户注册</a>
      </h1>
      <div class="am-header-right am-header-nav">
        <a href="#right-link" class="">
          <i class="am-header-icon  am-icon-home"></i>
        </a>
      </div>
    </header>
    <div class="cart-panel">
		<form class="am-form" action="{:url('register')}" method="post">
            <div class="am-form-group am-form-icon">
                <i class="am-icon-user" style="color:#329cd9"></i>
                <input type="text" name="username" class="am-form-field  my-radius" placeholder="请输入您的用户名">
            </div>
            <div class="am-form-group am-form-icon">
                <i class="am-icon-lock" style="color:#329cd9"></i>
                <input type="password" name="pwd" class="am-form-field  my-radius" placeholder="请输入您的密码">
            </div>
            <div class="am-form-group am-form-icon">
                <i class="am-icon-lock" style="color:#e9c740"></i>
                <input type="password" name="repwd" class="am-form-field  my-radius" placeholder="请重复输入一次密码">
            </div>
            <div class="am-form-group am-form-icon" >
                <i class="am-icon-lock" style="color:#e9c740"></i>
                <input type="text" name="yzcode" class="am-form-field  my-radius" style="width: 50%;display: inline-block" placeholder="请输入验证码">
                <img src="{:url('yzcode')}" alt="" onclick="changeSrc(this);">

            </div>

            <!--<div class="am-form-group am-form-icon">-->
                <!--<i class="am-icon-envelope" style="color:#78c3ca"></i>-->
                <!--<input type="text" class="am-form-field  my-radius" placeholder="请输入邮箱号码">-->
            <!--</div>-->
            <div class="am-form-group am-form-icon">
                <i class="am-icon-phone" style="color:#f09513"></i>
                <input type="text" class="am-form-field  my-radius" name="phone" style="width: 50%;display: inline-block" placeholder="请输入联系电话">
                <button type="button" id="send_msg" wertyui="123">点击发送验证码</button>
            </div>
            <div class="am-form-group am-form-icon">
                <i class="am-icon-phone" style="color:#f09513"></i>
                <input type="text" class="am-form-field  my-radius" name="phone_yzcode"  placeholder="请输入手机验证码">
            </div>
            <p class="am-text-center"><button type="submit" class="am-btn am-btn-danger am-radius am-btn-block">立即注册</button></p>
        </form>
    </div>
    
    <footer data-am-widget="footer" class="am-footer am-footer-default" data-am-footer="{  }">
        <hr data-am-widget="divider" style="" class="am-divider am-divider-default"/>
      <div class="am-footer-miscs ">
        <p>CopyRight©2014 AllMobilize Inc.</p>
        <p>京ICP备13033158</p>
      </div>
    </footer>
    <!--底部-->
    <div data-am-widget="navbar" class="am-navbar am-cf my-nav-footer " id="">
      <ul class="am-navbar-nav am-cf am-avg-sm-4 my-footer-ul">
        <li>
          <a href="/wap/" class="">
            <span class="am-icon-home"></span>
            <span class="am-navbar-label">首页</span>
          </a>
        </li>
        <li>
          <a href="###" class="">
            <span class=" am-icon-phone"></span>
            <span class="am-navbar-label">电话</span>
          </a>
        </li>
        <li>
          <a href="###" class="">
            <span class=" am-icon-comments"></span>
            <span class="am-navbar-label">聊天</span>
          </a>
        </li>
        <li>
          <a href="#" class="">
            <span class=" am-icon-map-marker"></span>
            <span class="am-navbar-label">地图</span>
          </a>
        </li>
        <li style="position:relative">
          <a href="javascript:;" class="">
            <span class="am-icon-user"></span>
            <span class="am-navbar-label">会员</span>
          </a>

        </li>

      </ul>

    </div>
</div>
</body>
</html>
<script>
    function changeSrc(obj) {
        obj.src=obj.src.split('?')[0] + '?a=' + Math.random();
    }
    var T;
    $('#send_msg').click (function () {
        $(this).html('<span>60</span>秒后再发送');
        $(this).prop('disabled' , true);
       T =  setInterval(daojishi , 1000);
        $.ajax({
            'data' : 'phone='+$('input[name=phone]').val()+'&yzcode='+$('input[name=yzcode]').val(),
            'url' : '{:url("send_phone_msg")}',
            success: function (res) {
                if (res.msg){
                    alert(res.msg)
                }
            }
        })
    })
    
    function daojishi() {
        var num = $('#send_msg span').html();
        if (num <= 1) {
            $('#send_msg').html('点击发送验证码');
            $('#send_msg').prop('disabled' , false);
            clearInterval(T);
        }
        num --;
        $('#send_msg span').html(num);
    }
</script>
